
import React, { useContext, useState } from "react"

// https://www.bilibili.com/video/BV1Bu4y1s7me/
// 使用children prop优化子组件渲染



const Parent = (props) => {

  const [name, setName] = useState("name")

  // console.log('Parent render...')
  return (
    <>
      <h1>Parent</h1>
      <p>
        {name}
      </p>
      <button onClick={() => setName(Math.random())}>登录</button>

      <hr />

      {/* 如果子组件放在父组件中，Parent状态易变，子组件也会重新渲染 */}
      {/* <Child /> */}


      {/* 通过props.children 来渲染子组件，则不会触发子组件的渲染 */}
      {props.children}
    </>
  )
}


const Child = (props) => {

  console.log('Child render...')
  return (
    <>
      <h1>Child</h1>
    </>
  )
}



function ParentChildApp() {

  return (
    <main>
      {/* <Parent /> */}

      <Parent>
        <Child />
      </Parent>
    </main>
  )
}



export default ParentChildApp

